<template>
	<view class="vip-page">
		<view class="vip-bg"></view>
		<view class="vip-card">
			<image src="./../../static/pic/food1.jpg" mode="widthFix"></image>
			<text>张三宠物店的会员卡</text>
		</view>
		<view class="vip-info">
			<view class="info-title flex-b flex-a">
				<view class="flex-a">
					<view>
						<image src="./../../static/store/vip-icon.png" mode="widthFix"></image>
					</view>
					<view>
						<view class="vip-name">爱妃000tld <text>Lv1</text></view>
						<view class="vip-grade">距下一等级还差100成长值</view>
					</view>
				</view>
				<view class="vip-btn">
					会员特权
				</view>
			</view>
			<view class="info-list flex-d">
				<view>
					<view class="vip-point"><text>0</text></view>
					<view class="vip-txt">积分</view>
				</view>
				<view>
					<view class="vip-point"><text>0</text></view>
					<view class="vip-txt">优惠券</view>
				</view>
				<view>
					<view class="vip-point">
						<image src="./../../static/store/code.png" mode="widthFix"></image>
					</view>
					<view class="vip-txt">会员码</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getVipInfo
	} from '../../api/store.js'
	export default {
		data() {
			return {
				vipInfo: {}
			}
		},
		onLoad(option) {
			if (option.storeNo) {
				this.getVipInfo(option.storeNo)
			}
		},
		methods: {
			// 查看会员中心
			getVipInfo(storeNo) {
				getVipInfo({
					storeNo: storeNo
				}).then(res => {
					if (res.code == 200) {
						this.vipInfo = res.data
					}
				})
			},
		},
		computed: {

		}
	}
</script>

<style lang="scss">
	page {
		background: $uni-bg-color-grey;
	}

	.vip-page {
		.vip-bg {
			background: #212121;
			width: 1000rpx;
			height: 800rpx;
			border-radius: 50%;
			margin: -550rpx 0 0 -130rpx;
		}

		.vip-card {
			width: 90%;
			height: 250rpx;
			border-radius: 20rpx;
			margin: -250rpx auto 0;
			// background: url(./../../static/store/vip.png)no-repeat 0 0;
			background-size: 100% 100%;
			color: #fff;
			padding: 50rpx 20rpx;
			box-sizing: border-box;

			image {
				width: 80rpx;
				vertical-align: middle;
				margin-right: 10rpx;
			}
		}

		.vip-info {
			width: 94%;
			margin: 20rpx auto;
			padding: 20rpx 40rpx;
			box-sizing: border-box;
			background: #fff;
			border-radius: 10rpx;

			.info-title {
				border-bottom: 1rpx solid #ccc;
				padding-bottom: 20rpx;

				image {
					width: 80rpx;
					margin-right: 20rpx;
				}

				.vip-name {
					font-size: 28rpx;
				}

				.vip-grade {
					font-size: 22rpx;
				}

				.vip-btn {
					width: 130rpx;
					text-align: center;
					height: 40rpx;
					line-height: 40rpx;
					border: 1rpx solid #333;
					font-size: 24rpx;
					border-radius: 20rpx;
				}
			}

			.info-list {
				text-align: center;
				margin-top: 30rpx;
				align-items: flex-end;

				.vip-point {
					font-size: 40rpx;
					font-weight: bold;

					text {
						position: relative;
						top: -10rpx;
					}

					image {
						width: 60rpx;
					}
				}

				.vip-txt {
					font-size: 24rpx;
				}
			}
		}
	}
</style>
